<style lang='scss'>
.tablelist-tree-search {
	width: 157px;
	padding: 15px 0;
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid #dddddd;
    
    .ivu-tree-title {
        max-width: 100%;
        max-height: 32px;    
        word-break: break-all;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
</style>


<template>
	<Tree
		:data="handleTraversalData(data,true)"
		:toggleActive="false"
		class="tablelist-tree-search padding-right-10"
		ref="tree"
		@on-select-change="handleSearch"
	></Tree>
</template>

<script>
export default {
	props: ['data', 'defaultKey'],
	data() {
		return {

		};
	},
	created() {
		this._values = {};
		this.handleTraversalData(this.data, false);
	},
	watch: {
		data(val) {
			this.handleTraversalData(val, false);
		}
	},
	methods: {
		handleSearch(isActive, data) {
			const searchData = {}, defaultKey = this.defaultKey;
			Object.values(this._values).forEach((item) => {
				const attach = item.attach;
				searchData[item.key || defaultKey] = null;
				if (attach && typeof attach === 'object') {
					Object.keys(attach).forEach((key) => {
						searchData[key] = null;
					})
				}
			})
			if (isActive) {
				const item = this._values[data.key];
				if(item === undefined){
				    const extIndex = data.key.lastIndexOf('@');
				    const key = data.key.substring(0, extIndex);
                    const itemValue = data.key.substring(extIndex + 1, data.key.length);
				    const attach = 'undefined';
                    searchData[key || defaultKey] = itemValue;
                    if (attach && typeof attach === 'object') {
                        searchData = { ...searchData, ...attach };
                    }
				}else{
				    const attach = item.attach;
                    searchData[item.key || defaultKey] = item.value;
                    if (attach && typeof attach === 'object') {
                        searchData = { ...searchData, ...attach };
                    }
				}
			}
			this.$emit('on-search', searchData)
		},
		//遍历转换数据
		handleTraversalData(node, isTraversal = true/*是否转换*/) {
			if (!node || !Array.isArray(node) || !node.length) return [];
			let nodeList = [];
			if (node) {
				let stack = node.map((item) => {
					return {
						data: item,
					}
				});
				while (stack.length != 0) {
					let child = stack.shift();
					let data = child.data;
					let key = `${data.key || ''}@${data.value || ''}`;
					if (!isTraversal) {
						this._values[key] = {
							key: data.key,
							value: data.value,
							attach: data.attach
						}
					} else {
						if (data.show === false) continue;
						data = {
							title: data.label,
							key,
							expand: true,
						}
						if (child.parent) {
							if (!Array.isArray(child.parent.children)) child.parent.children = [];
							child.parent.children.push(data);
						} else {
							nodeList.push(data);
						}
					}
					let children = child.data.children || child.data.options || [];
					for (let i = children.length - 1; i >= 0; i--) {
						stack.push({
							data: children[i],
							parent: data,
						});
					}
				}
			}
			return nodeList;
		}
	}
}
</script>
